<template>
  <NvCrud
    :option :data :pagination
    @update:page="handlePageChange"
    @update:page-size="handlePageSizeChange"
  />
</template>

<script setup lang="ts">
import type { PaginationProps } from 'naive-ui'
import type { NvCrudOption } from 'nv-crud'
import { useMessage } from 'naive-ui'
import { NvCrud } from 'nv-crud'
import { reactive } from 'vue'

const message = useMessage()
const pagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 3,
  pageSizes: [3, 5, 10, 15],
  showSizePicker: true,
})
function handlePageChange(page: number) {
  message.info(`当前页：${page}`)
  pagination.page = page
}
function handlePageSizeChange(pageSize: number) {
  message.info(`页条数：${pageSize}`)
  pagination.pageSize = pageSize
}

const data = Array.from({ length: 100 }, (_, i) => ({
  name: `name${i + 1}`,
  sex: i % 2 === 0 ? '男' : '女',
  age: i + 1,
}))

const option: NvCrudOption = {
  layout: 'simple',
  rowActions: false,
  actionbar: false,
  fields: {
    name: { title: '姓名' },
    sex: { title: '性别' },
    age: { title: '年龄' },
  },
}
</script>
